<template>
  <div class="container">
      <el-input placeholder="请输入商品名进行搜索" v-model="searchValue" class="input-with-select">
        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
      </el-input>
      <div style="width: 900px;margin-top: 10px">
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item>
            <img src="../../assets/ban1.jpg" alt="" height="300px" width="500px">
          </el-carousel-item>
          <el-carousel-item>
            <img src="../../assets/ban2.jpg" alt="" height="300px" width="500px">
          </el-carousel-item>
          <el-carousel-item>
            <img src="../../assets/ban3.jpg" alt="" height="300px" width="500px">
          </el-carousel-item>
        </el-carousel>
      </div>
      <div v-for="item in tableData" :key="item.id" class="card">
        <img :src="item.picture||require('@/assets/picture.png')" width="150px" height="150px" alt="">
        <div style="margin-left: 10px">
          <div style="text-align: center">{{ item.name }}</div>
          <div class="card-text">价格 : {{ item.price }}</div>
          <div class="card-text">团购价 : {{ item.groupPrice }}</div>
          <el-button size="small" type="warning" style="margin-top: 5px" @click="$router.push(`/details/${item.id}`)">查看详情</el-button>
        </div>
      </div>
    </div>
</template>

<script>
import { getList } from '@/api/product'
import { addCart } from '@/api/cart'
import { recordLog } from '@/api/recordLog'

export default {
  name: 'HomePage',
  data() {
    return {
      tableData: [],
      searchValue: ''
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      const searchObj = {}
      if (this.searchValue !== '') {
        searchObj.name = this.searchValue
      }
      getList(searchObj).then(response => {
        response.data.forEach(item => {
          if (item.picture !== null) {
            item.picture = process.env.VUE_APP_BASE_API + item.picture
          }
        })
        this.tableData = response.data
      })
    },
    handleAddCart(item) {
      const obj = {
        name: item.name,
        number: item.number,
        username: this.$store.getters.username,
        price: item.price,
        groupPrice: item.groupPrice
      }
      addCart(obj).then(res => {
        recordLog({ username: this.$store.getters.username, operate: `添加购物车:${obj.name}` })
        this.$message({
          message: '添加成功',
          type: 'success',
          center: true
        })
      })
    },
    search() {
      this.fetchData()
    }
  }
}
</script>

<style scoped lang="less">
.container {
  width: 900px;
  margin: 20px auto;
  padding: 10px;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  .card {
    width: 40%;
    height: 160px;
    background-color: #fcf3ec;
    border-radius: 10px;
    border: 2px solid #4d4552;
    padding: 20px;
    margin-top: 20px;
    display: -webkit-flex;
    display: flex;
    img {
      border-radius: 5px;
    }
    .card-text {
      height: 35px;
      font-size: 14px;
      font-family: "Helvetica Neue",Helvetica,"PingFang SC","Hiragino Sans GB","Microsoft YaHei","微软雅黑",Arial,sans-serif;
      line-height: 35px;
      margin-top: 5px;
      padding-left: 10px;
    }
  }
}

.el-button--warning.is-active,
.el-button--warning:active {
  background: #4d4c50;
  border-color: #4d4c50;
  color: #fff;
}

.el-button--warning:focus,
.el-button--warning:hover {
  background: #575559;
  border-color: #575559;
  color: #fff;
}

.el-button--warning {
  color: #FFF;
  background-color: #4d4c50;
  border-color: #4d4c50;
}
</style>
